<script setup>
import { ref, watch, onMounted } from 'vue'
import { getProductPageAPI } from '@/apis/product'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const keyword = route.query.keyword

const productList = ref([])
const page = ref({
    current: 1,
    pageSize: 10,
    total: 100
})

watch(
    () => page.value.current,
    (newVal) => {
        getPage(newVal)
    }
)
watch(
    () => route.query.keyword,
    () => router.go(0)
)


const getPage = async (pageNum) => {
    const res = await getProductPageAPI({ page: pageNum, keyWord: keyword })
    // console.log(res)
    if (res.code === 2000) {
        productList.value = res.data.records
        page.value.total = res.data.total
    }
}

onMounted(() => {
    console.log(`onMounted....${keyword}`)
    getPage(1)
})
</script>

<template>
<div class="product-page">
<div class="empty" v-if="productList.length === 0">
    <img src="@/assets/icon/empty.png" alt="">
    什么都没有找到~
</div>
<div v-else>
    <div class="product-list">
        <div class="product-card" v-for="product in productList" :key="product.id">
            <RouterLink :to="`/productDetail/${product.id}`">
                <div class="product-img"><img :src="product.pic" alt=""></div>
                <div class="product-data">
                    <div class="price">
                        <template v-if="product.minPrice === product.maxPrice">{{ product.minPrice }}</template>
                        <template v-else>{{ product.minPrice }}-{{ product.maxPrice }}</template>
                        <span>元</span>
                    </div>
                    <div class="sale">近日成交99单</div>
                </div>
                <div class="product-des">{{ product.description }}</div>
            </RouterLink>
        </div>
    </div>
    <div class="pagination">
        <el-pagination 
            background 
            layout="prev, pager, next" 
            v-model:page-size="page.pageSize"
            v-model:current-page="page.current"
            :total="page.total" 
        />
    </div>
</div>
</div>
</template>

<style scoped lang='scss'>
.product-page {
    width: 1280px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;

    $emptySize: 350px;
    .empty {
        width: $emptySize;
        margin: 0 auto;
        margin-bottom: 80px;
        color: #b5b5b5;
        text-align: center;
    }

    .product-list {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        min-height: 600px;

        .product-card {
            flex-direction: column;            
            width: 240px;
            height: 280px;
            padding: 15px;
            transition: all .3s;
            
            &:hover {
                transform: translate3d(0, -3px, 0);
                box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
            }

            >a {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
            }

            .product-img {
                width: 180px;
                height: 180px;
            }

            .product-data {
                display: flex;
                justify-content: space-between;
                width: 180px;
                height: 25px;
                margin-top: 10px;
                margin-bottom: 5px;

                >div {
                    height: 100%;
                    line-height: 25px;
                }

                .price {
                    color: #ff442f;
                    font-size: 18px;

                    >span {
                        font-size: 14px;
                    }
                }

                .sale {
                    color: #909090;;
                    font-size: 12px;
                }
            }

            .product-des {
                width: 180px;
                height: 30px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 60px;
}
</style>
